<script>
export default {
  name: 'Category',
  data: function () {
    return {}
  },
  props: ['title'],
}
</script>

<template>
  <div class="category">
    <h1>{{ title }} 分类</h1>
    <!-- 定义一个插槽【挖个坑，等着组件的使用者进行填充】 -->
    <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现！</slot>
    <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现！</slot>
  </div>
</template>

<style scoped>
.category {
  background-color: #dab649;
  width: 250px;
  height: 350px;

  /* 启用 Flexbox 布局，垂直堆叠 */
  /*display: flex;
  flex-direction: column;*/
  /* 垂直居中 */
  /*justify-content: center;*/
  /* 水平居中 */
  /*align-items: center;*/

  /* 如果有 padding 或 border 影响布局，可加上 */
  /*box-sizing: border-box;*/
}

h1 {
  background-color: #dab649;
  text-align: center;
}

ul li {
  text-align: left;
  font-size: 15px;
}

img {
  width: 80%;
  height: 60%;
  padding-left: 50px;

  /* 可选：保持图片原始比例，防止拉伸变形 */
  object-fit: cover;
  /* 可选：给图片加点圆角或阴影更美观 */
  border-radius: 8px;
}
</style>